<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <script src="./lib/vue-resource-1.3.4.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">

    <style>
        td {
            vertical-align: middle !important;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加</h3>
            </div>
            <div class="panel-body form-inline">
                <label for="">name: <input type="text" class="form-control" v-model="name"></label>
                <label for="">price: <input type="text" class="form-control" v-model="price"
                        @keyup.enter="insertBrands"></label>
                <label for=""><input type="button" value="添加" class="btn btn-primary" @click="insertBrands"></label>
                <label for="">搜索：<input type="text" class="form-control" v-model:value="key" v-focus
                        @keyup.enter="search(key)" placeholder="请输入后回车"></label>
            </div>
        </div>

        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <!-- <th>Id</th> -->
                    <th>Name</th>
                    <th>price</th>
                    <th>CreateTime</th>
                    <th>Operation</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in brands" :key="item.id">
                    <!-- <td>{{item.id}}</td> -->
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>{{item.create_time | DateFormat}}</td>
                    <td>

                        <button type="button" class="btn btn-danger" @click="del(item.id)">删除</button>

                    </td>
                </tr>
            </tbody>
        </table>





    </div>

    <script>
        Vue.directive("focus", {
            inserted(el) {
                el.focus()
            }
        })
        Date.prototype.format = function(fmt) {
            var o = {
                "M+": this.getMonth() + 1, //月份 
                "d+": this.getDate(), //日 
                "h+": this.getHours(), //小时 
                "m+": this.getMinutes(), //分 
                "s+": this.getSeconds(), //秒 
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
                "S": this.getMilliseconds() //毫秒 
            };
            if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            }
            for (var k in o) {
                if (new RegExp("(" + k + ")").test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                }
            }
            return fmt;
        }


        // 全局配置 根路径
        Vue.http.options.root = "http://127.0.0.1:8080/"

        // 全局配置emulateJson
        Vue.http.options.emulateJson = true
        var vm = new Vue({
            el: '#app',
            data: {
                brands: [],
                name: "",
                price: "",
                key: "",
                search_data: []

            },
            filters: {
                DateFormat: function(dateString, formatStr = "yyyy-MM-dd hh:mm:ss") {
                    var dt = new Date(dateString)
                    return dt.format(formatStr)
                },
            },
            methods: {
                listBrands() {
                    this.$http.get("brands/list").then(result => {
                        if (result.data.code === 0) {
                            this.brands = result.data.data
                        } else {
                            console.log("err=>", result.data.msg)
                        }

                    })
                },
                insertBrands() {
                    if (this.name == "") {
                        console.log("请输入")
                        return
                    } else {
                        this.$http.post("brands/insert", {
                            name: this.name,
                            price: this.price
                        }, {
                            headers: {
                                "Content-Type": "application/json",
                                "Accept": "application/json"
                            }
                        }).then(result => {
                            this.listBrands()
                            this.name = this.price = ""
                        })
                    }
                },
                del(id) {
                    this.$http.delete("brands/delete/" + id, {}, {
                        headers: {
                            "Content-Type": "application/json",
                            "Accept": "application/json"
                        }
                    }).then(result => {
                        this.listBrands()
                    })
                },
                search(key) {
                    if (key == "") {
                        this.listBrands()
                    }
                    this.$http.get("brands/search?name=" + key, {}, {
                        headers: {
                            "Content-Type": "application/json",
                            "Accept": "application/json"
                        }
                    }).then(result => {
                        // console.log(result.data.data)
                        this.brands = result.data.data
                    })
                }
            },
            created() {
                this.listBrands()
            },
        });
    </script>
</body>

</html>